<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户管理</title>
  <link rel="stylesheet" href="{__CSS__}/element_ui.css"/>
  <link rel="stylesheet" href="{__CSS__}/style.css"/>
  <script src="{__JS__}/vue2.js"></script>
  <script src="{__JS__}/element_ui.js"></script>
  <script src="{__JS__}/axios.min.js"></script>
  <script src="{__JS__}/request.js"></script>
</head>
<body>
<!-- 组件导入 -->
{include file="/components/fileSelect"}
<div id="app">
  <div class="app-loading" v-if="pageLoading">
    <div class="app-loading__logo">
      <img src="{__IMG__}/logo.png"/>
    </div>
    <div class="app-loading__loader"></div>
    <div class="app-loading__title">{$title}</div>
  </div>
  <el-card class="box-card" v-else>
    <div slot="header" class="clearfix">
      <span>用户管理</span>
    </div>
    <div class="search-box">
      <el-form>
        <el-form-item label="用户来源">
          <el-button-group>
            <el-button :class="{'primary': searchForm.source_id == 0}" size="small" @click="checkTab(0)">全部</el-button>
            <el-button :class="{'primary': searchForm.source_id == 2}" size="small" @click="checkTab(2)">微信小程序</el-button>
            <el-button :class="{'primary': searchForm.source_id == 4}" size="small" @click="checkTab(4)">H5</el-button>
            <el-button :class="{'primary': searchForm.source_id == 3}" size="small" @click="checkTab(3)">PC</el-button>
            <el-button :class="{'primary': searchForm.source_id == 5}" size="small" @click="checkTab(5)">APP</el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-top: 20px;">
        <el-form-item label="用户等级">
          <el-select v-model="searchForm.level_id" placeholder="请选择用户等级" size="small" clearable>
            <el-option :label="item.title" :value="item.id" v-for="item in level" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户分组">
          <el-select v-model="searchForm.group_id" placeholder="请选择用户分组" size="small" clearable>
            <el-option :label="item.name" :value="item.id" v-for="item in group" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户标签">
          <el-select v-model="searchForm.label_id" placeholder="请选择用户标签" size="small" multiple clearable>
            <el-option :label="item.name" :value="item.value" v-for="item in label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.phone" size="small"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="searchForm.nickname" size="small"></el-input>
        </el-form-item>
        <el-form-item label="成交次数">
          <el-col :span="11">
            <el-input v-model="searchForm.start_total_times" size="small" clearable></el-input>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-input v-model="searchForm.end_total_times" size="small" clearable></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="消费金额">
          <el-col :span="11">
            <el-input v-model="searchForm.start_total_spend" size="small" clearable></el-input>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-input v-model="searchForm.end_total_spend" size="small" clearable></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-date-picker
                  size="small"
                  v-model="searchForm.register_time"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上次访问时间">
          <el-date-picker
                  size="small"
                  v-model="searchForm.last_visit_time"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search" size="small">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-bottom: 10px"></div>
    <el-button type="primary" icon="el-icon-plus" size="small" @click="addUser" style="margin-top: 10px">添加用户</el-button>
    <div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-top: 10px"></div>
    <el-table
            :data="tableData"
            :row-style="{ height: '57px'}"
            style="width: 100%;font-size: 12px">
      <el-table-column
              prop="id"
              label="ID"
              width="75px">
      </el-table-column>
      <el-table-column
              prop="vip_level"
              label="用户等级">
      </el-table-column>
      <el-table-column
              prop="group.name"
              label="用户分组">
      </el-table-column>
      <el-table-column
              prop="nickname"
              label="昵称">
      </el-table-column>
      <el-table-column
              label="头像">
        <template slot-scope="scope">
          <el-image
                  style="width: 30px; height: 30px"
                  :src="scope.row.avatar"></el-image>
        </template>
      </el-table-column>
      <el-table-column
              prop="phone"
              label="手机号">
      </el-table-column>
      <el-table-column
              label="状态"
              width="100px">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 1">启用</el-tag>
          <el-tag type="danger" v-if="scope.row.status == 2">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
              prop="last_visit_time"
              label="上次访问时间">
      </el-table-column>
      <el-table-column
              prop="register_time"
              label="注册时间">
      </el-table-column>
      <el-table-column
              label="操作"
              fixed="right">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="handleBalance(scope.row)" type="text" size="small">修改余额</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-div" style="margin-top: 20px">
      <el-pagination
              background
              layout="prev, pager, next"
              :page-size="searchForm.limit"
              @current-change="pageChangeHandle"
              :total="page.total">
      </el-pagination>
    </div>
  </el-card>

  <!-- 用户新增/编辑 -->
  <el-dialog
          title="用户管理"
          :visible.sync="userDialogVisible"
          destroy-on-close
          :close-on-click-modal="false"
          width="800px">
    {include file="/user/save"}
  </el-dialog>

  <!-- 操作余额 -->
  <el-dialog
          title="更改余额"
          :visible.sync="balanceDialogVisible"
          destroy-on-close
          :close-on-click-modal="false"
          width="500px">
    {include file="/user/balance"}
  </el-dialog>

  <el-dialog title="" :visible.sync="dialogVisible" width="1200px" class="image-check-dialog">
    <file-select :need-select="true" @selected-img="selectedImg" @close-dialog="dialogVisible=false" :select-num="1"></file-select>
  </el-dialog>
</div>
<script>

  let level = {$level | raw};
  let group = {$group | raw};
  let source = {$source | raw};
  let label = {$label| raw};

  new Vue({
    el: '#app',
    data: function () {
      return {
        pageLoading: true,
        balanceDialogVisible: false,
        dialogVisible: false,
        userDialogVisible: false,
        level: level,
        group: group,
        source: source,
        label: label,
        baseIndex: '/{:config("shop.backend_index")}/',
        searchForm: {
          level_id: '',
          group_id: '',
          label_id: '',
          phone: '',
          nickname: '',
          start_total_times: '',
          end_total_times: '',
          start_total_spend: '',
          end_total_spend: '',
          register_time: '',
          last_visit_time: '',
          source_id: '',
          page: 1,
          limit: 10
        },
        form: {
          id: 0,
          nickname: '',
          password: '',
          phone: '',
          register_time: '',
          status: 1,
          avatar: '',
          email: '',
          real_name: '',
          vip_level: '',
          group_id: '',
          source_id: '',
          birthday: '',
          id_card: '',
          integral: 0,
          address: ''
        },
        rules: {
          nickname: [
            { required: true, message: '请输入昵称', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' }
          ],
          register_time: [
            { required: true, message: '请输入注册时间', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请选择状态', trigger: 'blur' }
          ],
        },
        page: {
          total: 0
        },
        tableData: [],
        mode: 'add',
        formKey: Date.parse(new Date()),
        balanceForm: {
          user_id: 0,
          type: '1',
          balance: 0
        }
      }
    },
    mounted() {
      this.getList()
      this.pageLoading = false
    },
    methods: {
      async getList() {
        let res = await request.get(this.baseIndex + "user/index", this.searchForm)
        if(res.code ==0){
          this.tableData = res.data.data
          this.page.total = res.data.total
        }else{
          this.$message.error(res.msg)
        }
      },
      // 初始化表单
      initForm() {
        this.form = {
          id: 0,
          nickname: '',
          password: '',
          phone: '',
          register_time: '',
          status: 1,
          avatar: '',
          email: '',
          real_name: '',
          vip_level: '',
          group_id: '',
          source_id: '',
          birthday: '',
          id_card: '',
          integral: 0,
          address: ''
        }
      },
      // 搜索
      onSubmit() {
        this.searchForm.page = 1
        this.getList()
      },
      // 编辑
      handleEdit(item) {
        this.mode = 'edit'
        delete this.rules.password
        this.formKey = Date.parse(new Date())

        this.form.id = item.id
        this.form.nickname = item.nickname
        this.form.phone = item.phone
        this.form.register_time = item.register_time
        this.form.status = item.status
        this.form.avatar = item.avatar
        this.form.email = item.email
        this.form.real_name = item.real_name
        this.form.vip_level = (item.vip_level == 0) ? '' : item.vip_level
        this.form.group_id = (item.group_id == 0) ? '' : item.group_id
        this.form.source_id = (item.source_id == 0) ? '' : item.source_id + ''
        this.form.birthday = item.birthday
        this.form.id_card = item.id_card
        this.form.integral = item.integral
        this.form.address = item.address

        this.$nextTick(() => {
          this.userDialogVisible = true
        });
      },
      // 修改余额
      handleBalance(item) {
        this.balanceForm.user_id = item.id
        this.balanceForm.now_balance = item.balance
        this.balanceDialogVisible = true
      },
      // 选择状态
      checkTab(type) {
        this.searchForm.source_id = type
        this.searchForm.page = 1
        this.getList()
      },
      // 翻页
      pageChangeHandle(page) {
        this.searchForm.page = page
        this.getList()
      },
      // 添加用户
      addUser() {
        this.mode = 'add'
        this.initForm()
        this.rules.password = [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
        this.formKey = Date.parse(new Date())
        this.$nextTick(() => {
          this.userDialogVisible = true
        });
      },
      // 选资源
      showImage() {
        this.dialogVisible = true
      },
      selectedImg(file) {
        this.form.avatar = file[0].url
        this.dialogVisible = false
      },
      // 移除图片
      removeImg() {
        this.form.avatar = ''
      },
      // 提交表单
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let res;
            if (this.mode == 'add') {
              res = await request.post(this.baseIndex + "user/add", this.form)
            } else {
              res = await request.post(this.baseIndex + "user/edit", this.form)
            }

            if (res.code == 0) {
              this.$message.success(res.msg)
              this.userDialogVisible = false
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          }
        });
      },
      // 更改余额
      submitBalanceForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let res = await request.post(this.baseIndex + "user/balance", this.balanceForm)

            if (res.code == 0) {
              this.$message.success(res.msg)
              this.balanceDialogVisible = false
              this.balanceForm.balance = 0
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          }
        });
      }
    }
  })
</script>
<style>
  .search-box .el-form-item {
    margin-bottom: 10px !important;
  }

  .el-table__row td {
    height: 57px !important;
  }

  .primary {
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
  }
  .img-list {
    height: 60px;
    padding-left: 0;
    margin-top: 0;
  }
  .img-list li:first-child {
    margin-left: 0;
  }
  .img-list li {
    width: 58px;
    height: 58px;
    float: left;
    margin-left: 5px;
    cursor: pointer;
    position: relative;
  }
  .addImg {
    height: 56px;
    width: 56px;
    line-height: 56px;
    text-align: center;
    border: 1px dashed rgb(221, 221, 221);
  }
  ul li {list-style: none}
  .image-check-dialog .el-dialog__header {display: none}
  .image-check-dialog .el-dialog__body {padding: 0;}
  .img-list .img-tools {
    position: absolute;
    width: 58px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    top: 43px;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
  }
</style>
</body>
</html>